import React, { Component } from "react";
import { Input, Radio, DatePicker, Select, Button } from "antd";
import moment from "moment";
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;
const dateFormat = "YYYY/MM/DD";
function handleChange(value) {
  console.log(`selected ${value}`);
}
export default class ConponRouter extends Component {
  state = {
    //   默认全部商品不选中
    isSelAll: false,
    value: 1
  };
  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };
  aaa = () => {
    this.setState({
      isSelAll: !this.state.isSelAll
      //   !this.state.isSelAll
    });
    console.log(this.state.isSelAll);
  };
  render() {
    let { isSelAll } = this.state;

    return (
      <div className="add-conpon basic-page">
        <div className="basic">基本信息</div>
        <div className="conpon-name">
          <span className="main-title">优惠券名称：</span>
          <Input
            className="basic-input"
            placeholder="如：庆国庆优惠券，最多10个字"
          />
        </div>
        <div>
          <span className="main-title">发放总量：</span>
          <Input className="basic-input" placeholder="最多1000000000张" />张
        </div>
        <div className="total-amount">
          修改优惠券总量时只能增加不能减少，请谨慎设置
        </div>
        <div>
          <span className="main-title">适用商品：</span>
          <Radio checked={isSelAll} onClick={this.aaa}>
            全部商品可用
          </Radio>
        </div>
        <div className="measure">
          <div style={{ paddingTop: 4 }} className="main-title">
            适用商品：
          </div>
          <Radio.Group onChange={this.onChange} value={this.state.value}>
            <Radio className="radioStyle" value={1}>
              全部商品可用
            </Radio>
            <Radio className="radioStyle" value={2}>
              订单满 <Input style={{ width: 150 }} /> 元
            </Radio>
          </Radio.Group>
        </div>
        <div>
          <span className="main-title">优惠内容：</span>
          减免 <Input style={{ width: 150 }} /> 元
        </div>
        <div className="measure">
          <div style={{ paddingTop: 4 }} className="main-title">
            用券时间：
          </div>
          <Radio.Group onChange={this.onChange} value={this.state.value}>
            <Radio className="radioStyle" value={1}>
              <RangePicker
                defaultValue={[
                  moment("2015/01/01", dateFormat),
                  moment("2015/01/01", dateFormat)
                ]}
                format={dateFormat}
              />
            </Radio>
            <Radio className="radioStyle redempt" value={2}>
              领券当日起 <Input style={{ width: 150 }} /> 天内有效
            </Radio>
            <Radio className="radioStyle" value={3}>
              领券次日起 <Input style={{ width: 150 }} /> 天内有效
            </Radio>
          </Radio.Group>
        </div>
        {/* 领取和使用规则 */}
        <div className="basic">领取和使用规则</div>
        <div>
          <div className="measure">
            <div style={{ paddingTop: 4 }} className="main-title">
              每人领取次数：
            </div>
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio className="radioStyle" value={1}>
                不限次数
              </Radio>
              <Radio className="radioStyle" value={2}>
                <Select
                  defaultValue="lucy"
                  style={{ width: 120 }}
                  onChange={handleChange}
                >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                </Select>
              </Radio>
            </Radio.Group>
          </div>
        </div>
        {/* 使用说明 */}
        <div className="product-info">
          <div className="main-title">使用说明：</div>
          <TextArea rows={4} style={{ width: 330 }} />
        </div>
        <div className="sample">
          <div className="lookfor">查看示例</div>
          <div className="model">
            <div>庆国庆优惠券</div>
            <div>使用时间：2017-10-27 12:00:00-2017-10-29 14:34:34</div>
            <div>优惠内容：部分商品，满88元减20元优惠券</div>
            <div>其他限制：仅原价购买商品时可用券</div>
          </div>
        </div>
        <div className="click-btn">
          <div className="both">
            <Button type="primary" className="savebtn">
              保 存
            </Button>
            <Button>取 消</Button>
          </div>
        </div>
      </div>
    );
  }
}
